<script setup>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import {ref,onMounted} from 'vue'
let firstThree = ref()
const scene = new THREE.Scene()

const geometry = new THREE.BoxGeometry(150,100,100)

//因为基础材质不受光源的影响
// 所以这里用漫反射材质
const metaerial = new THREE.MeshLambertMaterial({
  color:'red'
})

const mesh = new THREE.Mesh(geometry,metaerial);
mesh.position.set(0,10,0)
scene.add(mesh)

/**
 * 创建一个三维坐标轴
 */
const axesHelper = new THREE.AxesHelper(150)
scene.add(axesHelper)

/**
 * 点光源
 */
const pointLight = new THREE.PointLight("#fff",1.0)
pointLight.decay = 0.2
// pointLight.decay = 0.0 // 光源 不随着距离的远近二减弱
pointLight.position.set(200,200,100)
scene.add(pointLight)
/**
 * 点光源辅助线-可视化
 */
const pointLightHelper = new THREE.PointLightHelper(pointLight)

scene.add(pointLightHelper)

// 环境光
const ambient = new THREE.AmbientLight("#fff",0.4)
scene.add(ambient)

// 平行光
const directionLight = new THREE.DirectionalLight("#a09",1.0)
directionLight.position.set(50,60,100)
scene.add(directionLight)

const width = 800;
const height = 500;

const camera = new THREE.PerspectiveCamera(30,width/height,1,3000)
camera.position.set(292,223,185)
camera.lookAt(0,0,0)


const renderer = new THREE.WebGLRenderer();
renderer.setSize(width,height)
renderer.render(scene,camera)

/**
 * 使用控制器
 * 左键：旋转
 * 中轴：缩放
 * 右键：移动
 */
const controls = new OrbitControls(camera,renderer.domElement)
controls.addEventListener("change",function(){
  // 重新渲染，必须有这步操作，否则数据改变，但无法看到
  renderer.render(scene,camera)
})
onMounted(()=>{
  document.getElementById("firstThree").appendChild(renderer.domElement)
})

</script>

<template>
  <div id="firstThree" ref="firstThree"></div>
</template>

<style scoped>
  #firstThree{
    width: 800px;
    height: 500px;
  }
</style>
